<template>
  <div class="pay-course">
  	<!-- 付费点播 -->
    <div class="section">
    	<div class="item-list" v-for="(item, index) in pay_audios" :key="index" @click="router({path: 'courseClass', query: {id: item.id}})">
    		<img :src="item.img">
    		<span class="mask"></span>
    		<div class="div-tip">
    			<span></span>
    			<h3>{{item.title}}</h3>
    			<p>{{item.brief}}</p>
    		</div>
    		<div class="flex-bottom">
    			<p class="bottom-title">{{item.title}}</p>
    			<p class="num">
    				<span class="video-num">共{{item.count}}课</span>
    				<span class="person-num">{{item.play_num}}人已点播</span>
    			</p>
    		</div>
    	</div>
    </div>
  </div>
</template>

<script>

import { get_pay_audio, baseUrl } from '@/api/api'
export default {
  components: {
  },
  data () {
    return {
			pay_audios: [], //付费分类点播
    }
  },
  created () {	
		this.get_pay_audios()
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    // 热门推荐付费音频
    get_pay_audios () {
      var jsonData = {
        hot: 0,
      }
    	get_pay_audio(jsonData).then((res) => {
    		console.log(res)
    		this.pay_audios = res.data.info
    	}).catch((err) => {
    		console.log(err)
    	})
    }
  }
}
</script>
<style lang="stylus" scoped>
	.pay-course
		background-color #f2f2f2
		min-width 100vw
		min-height 100vh
		.section
			background-color #fff
			.item-list
				padding 0
				padding-bottom 3rem
				position relative
				display block
				img
					height 16rem
				.mask
					position absolute
					background linear-gradient(0deg, rgba(0,1,26,0), rgba(0,1,26,.6))
					width 100%
					height 16rem
					top 0px
					left 0px
				.flex-bottom
					display flex
					padding 1.5rem
					padding-bottom 0
					.bottom-title
						color #333
						line-height 1.8rem
						font-size 1.5rem
						height 1.8rem
						font-weight bold
					.num
						text-align right
						flex 1
						line-height 1.8rem
						height 1.8rem
						font-size 1.2rem
						.video-num
							color #FF659B
							margin 1.5rem
						.person-num
							color #999
				.div-tip
					position absolute
					left 3.7rem
					top 5rem
					color #fff
					z-index 9
					h3
						font-weight bold
						font-size 1.8rem
					p
						width 15rem
						height 3rem
						font-size 1.2rem
						font-weight 500
						line-height 1.8rem
						margin-top .5rem
					span
						position absolute
						width 8rem
						height 1.4rem
						left -.5rem
						background-color #000
						top 1.2rem
						z-index -1
</style>